How Manual Layout works
The way Items are positioned and laid out on any of your store pages is determined by the table settings you apply to that page. EROL makes extensive use of tables to place your Items in exactly the sequence and layout your store requires.

The tables EROL uses on each page are referred to as 'Layout Tables'.

Each new Page always contains an initial Layout Table. This Layout Table will set the layout rules for all the Items that are going to be added to the page.

You can add as many Layout Tables as you like, inserting a new one every time you wish the sequence and layout of your Items to change.

Setting initial table settings
Each new Page in EROL always contains an initial Layout Table. This Layout Table will set the layout rules for all the Items that are going to be added to the page.

Most store builders are content with just using this first Layout Table, and do not require any additional Layout Tables.

The first Layout Table is represented in the List View with a square grid icon. When you select this in the List View, the properties and settings for that Layout Table become active on the right.

If you require the same Layout Table for every new page you create, you can set a default Layout Table for every new page.

To do this:
1. Select Tools > Options… from the main EROL toolbar
2. Click the 'Table Defaults' button
3. Set up your default Layout Table
4. Click 'Save and Close'

Setting the number of Items per row
The 'Number of Items per Row' dropdown determines the number of Items on each row of this first layout table.

If you are familiar with any sort of tabling, especially HTML tabling, you can understand this as meaning 'number of cells per row'.

E.g. If you add three items, but have 'Number of Items per Row' set at 2, the first two items will sit on next to one another on the first row, while the third item will be bumped down to the first cell of the second row. A fourth item, if added, will sit alongside the third.

Aligning the Items in the table cells
You can set the alignment of your items, within their cells (i.e. their place on the row) by selecting the desired alignment from the 'Item Alignment in Table Cell' dropdown.

Remember, this alignment will realign your Item as a unit and not the individual elements making up that item. To realign the individual element of an Item, you will need to modify the alignment of the 'Placeholder' of that element in the template assigned to that Item.

Setting the colours of the table
An EROL Layout Table is simply a common HTML table. Just with any HTML table, a Layout Table can have a background colour assigned to it, as well as a background colour for its cells.

To set the background colour of a table:
1. Select the Layout Table in the List View
2. Flip to the Properties tab
3. From the 'Table Colour' dropdown, select the desired background colour for the table

To set the background colour of a cell:
1. Select the Layout Table in the List View
2. Flip to the Properties tab
3. From the 'Cell Colour' dropdown, select the desired background colour for the table cells

Remember, in order to see both the table background colour and the cell background colour in your page, ensure that you have 'Cell Spacing' set to a value greater than '0'.

Creating spaces between items in the table
The spaces between Items in a table are controlled by the Cell Spacing and/or Cell Padding applied to the table.

Cell Spacing refers to the distance between the outer edges of each cell in the table

Cell Padding refers to the distance between the inner edge of a cell and the outer edge of the cell contents.

Adding horizontal lines between rows of Items
Separators, or horizontal lines, can be added between each row in your table. This can be effective when you have many similar products on the same page, all running one below the other.

To set horizontal lines between rows in a Layout Table:
1. Select the Layout Table in the List View
2. Flip to the Properties tab
3. Select the colour of your Horizontal Line from the Colour dropdown
4. Select the thickness of your Horizontal Line, in pixels, from the Thickness dropdown

Inserting a new Layout Table
You can insert a new Layout Table at any point in the List View.

There is no limit to the number of Layout Tables you add to one page, though keep in mind that unduly excessive use of Layout Tables will affect the loading time of that page.

To insert a new Layout Table:
1. Select a point in the List View below which you wish to apply new layout settings
2. Click the 'Insert Layout Table' button below the List View
3. Choose a position for the new table relative to the last
4. Apply all relevant settings

Remember, if there are no Items below a new Layout Table, you will not notice any effect when you preview your page. This is because a Layout Table only exists to contain and lay out the Items following it in the List View.

The exception to this is if you have added your own Header and Footer HTML to the table, in which case this HTML will be visible.

Positioning a new Layout Table
When you insert a new Layout Table, you will need to decide where that new Table is going to sit in relation to the Layout table that came before it.

You have three options for the position of a new Layout Table:
i) To the Right of Last
Places the new table adjacent to - and to the right of - the previous table, effectively creating a new column in your page
You will be required to set a % width for your new adjacent table. Set this at a percentage you wish your new 'column' to appear

ii) Below Last
Places the new table immediately below the previous table. If your previous table was an adjacent table, this setting will place the table below the that, but not below the all others

iii) Below All
Places the new table below all previous tables, including series' of adjacent tables

Adding Header and Footer HTML to a new table
Every Layout Table can have your own HTML adjoined above and below the actual table.

To set the Header and Footer HTML:
1. Select the relevant Layout Table in the List View
2. Flip to the Header & Footer tab
3. Insert the required HTML into the Header and/or Footer field(s).

Remember that if you open any tags in the Header field and do not close them because you want them applied to the entire Layout Table, you will need to close them in the Footer field.

Setting a default Layout Table
You can set a default layout table that will be applied - by default - to all new pages you add to your store.

To do this:
1. Select Tools > Options… from the main EROL toolbar
2. Click the 'Table Defaults' button
3. Set up your default Layout Table
4. Click 'Save and Close'

All new Layout Tables you add will now be inserted with this Default applied to them. Additionally the first Layout Table for each new page will be defined by these default settings.